<template>
	<view class="wuyepay">
		<!-- 顶部 -->
		<view class="u-padding-30 head">
			<view class="u-font-32 u-margin-bottom-22">{{name}}</view>
			<view class="u-font-26 u-margin-bottom-22">车位状态：{{area}}㎡</view>
			<view class="u-font-26 u-margin-bottom-22">车牌号：{{prea}}</view>

			<view class="btn" @click="show=true">
				预缴费用
			</view>
		</view>

		<!-- 主体内容 -->
		<view class="main">
			<view class="main_top"></view>

			<view class="mian_content u-padding-30 u-margin-bottom-34" v-for="(item,index) in arr1" :key='index'>
				<view class="u-flex">
					<u-checkbox-group>
						<u-checkbox shape="circle" v-model="item.cheweichecked" active-color="#F9A832"
									@change="getwuye(item)" :name="item.parkCostPrice"></u-checkbox>
					</u-checkbox-group>
					<view class="u-flex-1 u-margin-left-20">12/12</view>
					<view>{{item.parkCostPrice}}</view>
				</view>
				<view class="u-flex u-margin-top-12">
					<view class="u-flex-1 u-margin-left-50">{{item.periodBeginTime}} 至 {{item.periodEndTime}}</view>
					<view v-if="item.costSign==3">预缴</view>
					<view v-if="item.costSign==1">待缴</view>
					<view v-if="item.costSign==2">欠费</view>
				</view>
			</view>
		</view>
		<!-- footer -->
		<view class="foot">
			<view class="footer u-padding-left-30 u-flex">
				<view class="u-flex-1 u-margin-top-32">
					<u-checkbox shape="circle" v-model="allchecked" active-color="#F9A832" @change="checkboxChange">全选
					</u-checkbox>
				</view>
				<view class="u-flex">
					<view class="u-margin-top-32 u-font-32 ">合计：<text class="txet">￥{{hj | NumFormat}}</text></view>
					<view class="button" @click="paymoney">缴费</view>
				</view>
			</view>
		</view>
		<!-- 弹出步进器 -->
		<u-popup v-model="show" mode="bottom" length="30%">
			<view class="bjq">
				<u-number-box v-model="value" :input-width="100" :input-height="60"></u-number-box>
				<u-button size="medium" @click="quxiao" :custom-style="customStyle">取消</u-button>
				<u-button type="warning" size="medium" @click="success" :custom-style="customStyle">确认</u-button>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: 0,
				show: false,
				allchecked: false, //全选
				name: '九龙家园社区6号楼1单元D101房间',
				area: '100',
				prea: '1.5',
				hj: 0,
				zonghj: [],
				customStyle: {
					margin: '40rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
				},
				arr: [{
					name: '垃圾消纳费',
					money: '30.00'
				},
					{
						name: '垃圾消纳费',
						money: '30.00'
					},
					{
						name: '垃圾消纳费',
						money: '30.00'
					},
					{
						name: '垃圾消纳费',
						money: '30.00'
					},
				],
				arr1: [{
					parkCostPrice: '400.00',
					periodBeginTime: '2020-02-02',
					periodEndTime: '2020-03-02',
					cheweichecked: false,
					costSign: '1'
				},
					{
						parkCostPrice: '400.00',
						periodBeginTime: '2020-02-02',
						periodEndTime: '2020-03-02',
						cheweichecked: false,
						costSign: '1'
					}, {
						parkCostPrice: '400.00',
						periodBeginTime: '2020-02-02',
						periodEndTime: '2020-03-02',
						cheweichecked: false,
						costSign: '1'
					},
					{
						parkCostPrice: '400.00',
						periodBeginTime: '2020-02-02',
						periodEndTime: '2020-03-02',
						cheweichecked: false,
						costSign: '1'
					}
				],
				list: [{
					name: 'apple',
					checked: false,
					disabled: false
				},
					{
						name: 'banner',
						checked: false,
						disabled: false
					},
					{
						name: 'orange',
						checked: false,
						disabled: false
					}
				]
			}
		},
		watch: {
			n: {
				handler(newValue, oldValue) {
					this.hj = 0;
					for (let i = 0; i < newValue.length; i++) {
						this.hj += Number(newValue[i]);
						// this.hj += Number(newValue[i]);
					}
				},
				deep: true
			},
		},
		filters: {
			NumFormat(value) {
				if (!value) return '0.00';
				// 将数值截取，保留两位小数
				value = Number(value).toFixed(2);
				// 获取整数部分
				const intPart = Math.trunc(value);
				// 整数部分处理，增加,
				const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
				// 预定义小数部分
				let floatPart = '.00';
				// 将数值截取为小数部分和整数部分
				const valueArray = Number(value).toString().split('.');
				if (valueArray.length === 2) {
					// 有小数部分
					floatPart = valueArray[1].toString(); // 取得小数部分
					return intPartFormat + '.' + floatPart;
				}
				return intPartFormat + floatPart;
			}
		},
		methods: {
			// 确认
			success() {
				console.log(this.value)
				this.show = false
			},
			// 取消
			quxiao() {
				this.value = 0;
				this.show = false
			},
			checkboxChange() {
				this.hj = 0
				this.arr1.forEach(item => {
					if (this.allchecked == false) {
						item.cheweichecked = false
						this.hj = 0
					} else {
						item.cheweichecked = true
						this.hj += Number(item.parkCostPrice)
					}
				})
			},
			getwuye(item) {

				this.allchecked = true
				var a = 0;
				if (this.arr1.length > 0) {
					this.arr1.map((item) => {
						if (item.cheweichecked == false) {
							this.allchecked = false;
						}
					});
				} else {
					this.allchecked = true;
				}
				console.log(item)
				if (item.cheweichecked == false) {
					this.allchecked = false;
					for (var k in this.zonghj) {
						if (a == 0) {
							if (this.zonghj[k] == Number(item.parkCostPrice)) {
								this.zonghj.splice(k, 1)
								a++
							}
							console.log(Number(item.parkCostPrice, '22'))
						}
					}
				} else {
					this.zonghj.push(Number(item.parkCostPrice))
				}
				console.log(this.zonghj, Number(item.parkCostPrice))
			},
			paymoney() {
				console.log(1)
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: String(Date.now()),
					nonceStr: 'A1B2C3D4E5',
					package: 'prepay_id=wx20180101abcdefg',
					signType: 'MD5',
					paySign: '',
					// orderInfo: {
					// 	"appid": data.data.appid,
					// 	"noncestr": data.data.noncestr,
					// 	"package": "Sign=WXPay",
					// 	"partnerid": data.data.partnerid,
					// 	"prepayid": data.data.prepayid,
					// 	"timestamp": data.data.timestamp,
					// 	"sign": data.data.sign
					// },
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			checkboxChange(e) {
				console.log(e);
			},

		}
	}
</script>

<style scoped lang="scss">
	.box {
		padding: 40rpx 20rpx;
		background: rgba(244, 244, 244, 1);
		border-radius: 6px;
		margin-top: 10rpx;

		view {
			display: inline-block;
			width: 50%;
			margin-bottom: 10rpx;
		}
	}

	.btn {
		text-align: center;
		width: 290rpx;
		height: 92rpx;
		border-radius: 50rpx;
		border: 1px solid rgba(249, 168, 50, 1);
		line-height: 92rpx;
		color: #F9A832;
		font-size: 32rpx;
		margin: 40rpx auto;
	}

	.head {
		border-top: 1px solid rgba(0, 0, 0, .1);
	}

	.main_top {
		height: 80rpx;
		background: rgba(244, 244, 244, 1);
	}

	.foot .footer {
		width: 100%;
		height: 136rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;
		background: rgba(255, 255, 255, 1);
	}

	.txet {
		color: #FD3636;
	}

	.main {
		margin-bottom: 136rpx;
	}

	.button {
		width: 242rpx;
		height: 136rpx;
		line-height: 136rpx;
		text-align: center;
		background: linear-gradient(142deg, rgba(253, 211, 97, 1) 0%, rgba(249, 168, 50, 1) 100%);
		color: #fff;
	}

	.bjq {

		padding-top: 15%;
		padding-left: 60rpx;
		padding-right: 60rpx;

		button {
			margin: 40rpx;
		}
	}
</style>
<style lang="scss">
	.bjq {
		.u-numberbox {
			display: flex !important;
			justify-content: space-between !important;
			width: 100% !important;
			border-top: 1px solid #DCDCDC;
			border-bottom: 1px solid #DCDCDC;
			padding: 40rpx 0;
		}

		.u-icon-minus {
			margin-left: 60rpx !important;
		}

		.u-number-input {
			background-color: #fff !important;
		}

	}
</style>
